<template>
  <div>
    <Search @changeQuery="changeQuery"></Search>
    <GoodsListNav></GoodsListNav>
    <div class="container">
      <div class="bread-crumb">
        <Breadcrumb>
          <BreadcrumbItem to="/">
            <Icon type="ios-home-outline"></Icon> 首页
          </BreadcrumbItem>
          <BreadcrumbItem>
            <Icon type="bag"></Icon> {{ query.name }}
          </BreadcrumbItem>
        </Breadcrumb>
      </div>
      <!-- 商品展示容器 -->
      <div class="goods-box">
        <!-- 广告 -->
        <div class="as-box">
          <div class="item-as-title">
            <span>商品精选</span>
            <span>广告</span>
          </div>
          <div class="item-as" v-for="(item, index) in asItems" :key="index">
            <div class="item-as-img">
              <img :src="item.img" alt="" />
            </div>
            <div class="item-as-price">
              <span>
                <Icon type="social-yen text-danger"></Icon>
                <span class="seckill-price text-danger">{{ item.price }}</span>
              </span>
            </div>
            <div class="item-as-intro">
              <span>{{ item.intro }}</span>
            </div>
            <div class="item-as-selled">
              已有<span>{{ item.num }}</span
              >人评价
            </div>
          </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods-list-box">
          <div class="goods-list-tool">
            <ul>
              <li
                v-for="(item, index) in goodsTool"
                :key="index"
                @click="orderBy(item.en, index)"
              >
                <span :class="{ 'goods-list-tool-active': isAction[index] }"
                  >{{ item.title }} <Icon :type="icon[index]"></Icon
                ></span>
              </li>
            </ul>
          </div>
          <div class="goods-list">
            <div
              class="goods-show-info"
              v-for="item in goodsList"
              :key="item.id"
              @click="setGoodsIdLink(item.id)"
            >
              <div>
                <img class="goods-show-img" :src="item.imgUrls[0]" />
              </div>
              <div class="goods-show-price">
                <span>
                  <Icon type="social-yen text-danger"></Icon>
                  <span class="seckill-price text-danger">{{
                    item.price
                  }}</span>
                </span>
              </div>
              <div class="goods-show-seller">
                <span>{{ item.name }}</span>
              </div>
              <div class="goods-show-detail">
                <span>{{ item.content }}</span>
              </div>
              <div class="goods-show-num">
                库存<span>{{ item.stock }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-page">
        <Page
          :total="total"
          show-sizer
          @on-change="changePage"
          @on-page-size-change="changeSize"
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '~/components/search/Search'
import GoodsListNav from '~/components/nav/GoodsListNav'
import { mapMutations } from 'vuex'
import { search } from '~/api/goods'

export default {
  name: 'GoodsList',
  beforeRouteEnter(to, from, next) {
    if (process.client) {
      window.scrollTo(0, 0)
    }
    next()
  },
  data() {
    return {
      query: {
        name: '',
        page: 1,
        size: 10
      },
      total: 0,
      // start -------
      isAction: [true, false, false],
      icon: ['arrow-up-a', 'arrow-down-a', 'arrow-down-a'],
      goodsTool: [
        { title: '综合', en: 'sale' },
        { title: '评论数', en: 'remarks' },
        { title: '价格', en: 'price' }
      ],
      // end -------
      // 商品列表
      goodsList: [],
      // 广告列表
      asItems: [],
      goodsDetailLink: '/goodsDetail'
    }
  },
  created() {
    this.getQueryAndSend()
    this.getAsItem()
  },
  methods: {
    ...mapMutations(['SET_GOODS_ORDER_BY']),
    orderBy(data, index) {
      this.icon = ['arrow-down-a', 'arrow-down-a', 'arrow-down-a']
      this.isAction = [false, false, false]
      this.isAction[index] = true
      this.icon[index] = 'arrow-up-a'
      this.SET_GOODS_ORDER_BY(data)
    },
    // 获取广告列表
    getAsItem() {
      this.asItems = [
        {
          img: '/img/goodsList/item-as-img-1.jpg',
          price: 39.9,
          intro: 'SKSK 苹果7/7plus手机壳 iPhone 7 Plus保护套全包硬',
          num: 3140,
          sale: 9000
        },
        {
          img: '/img/goodsList/item-as-img-2.jpg',
          price: 36.6,
          intro: '狮普 苹果7/7 Plus手机壳 电镀 超薄 全包 防摔 保护外',
          num: 6160,
          sale: 8900
        },
        {
          img: '/img/goodsList/item-as-img-1.jpg',
          price: 38.6,
          intro: 'SKSK 苹果7/7plus手机壳 iPhone 7 Plus保护套全包硬',
          num: 9160,
          sale: 8800
        },
        {
          img: '/img/goodsList/item-as-img-2.jpg',
          price: 35.6,
          intro: '狮普 苹果7/7 Plus手机壳 电镀 超薄 全包 防摔 保护外',
          num: 6160,
          sale: 7990
        },
        {
          img: '/img/goodsList/item-as-img-1.jpg',
          price: 38.6,
          intro: 'SKSK 苹果7/7plus手机壳 iPhone 7 Plus保护套全包硬',
          num: 9160,
          sale: 7600
        },
        {
          img: '/img/goodsList/item-as-img-2.jpg',
          price: 35.6,
          intro: '狮普 苹果7/7 Plus手机壳 电镀 超薄 全包 防摔 保护外',
          num: 6160,
          sale: 6900
        }
      ]
    },
    // 更新参数并发送请求函数
    getQueryAndSend() {
      this.query = this.$route.query
      search(this.query).then(res => {
        this.goodsList = res.data.list
        this.total = res.data.total
      })
    },
    // 搜索组件点击搜索，触发该函数
    changeQuery() {
      // 该函数再触发以下函数
      this.getQueryAndSend()
    },
    // 改变页码
    changePage(page) {
      this.query.page = page
      search(this.query).then(res => {
        this.goodsList = res.data.list
        this.total = res.data.total
      })
    },
    // 改变页面搜索条数
    changeSize(size) {
      this.query.size = size
      search(this.query).then(res => {
        this.goodsList = res.data.list
        this.total = res.data.total
      })
    },
    setGoodsIdLink(id) {
      this.$router.push({
        path: `/goodsDetail`, query: { id }
      })
    }
  },
  components: {
    Search,
    GoodsListNav
  }
}
</script>

<style scoped>
.container {
  margin: 15px auto;
  width: 93%;
  min-width: 1000px;
}
.text-danger {
  color: #a94442;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
.goods-box {
  display: flex;
}
/* ---------------侧边广告栏开始------------------- */
.as-box {
  width: 200px;
  border: 1px solid #ccc;
}
.item-as-title {
  width: 100%;
  height: 36px;
  color: #b1191a;
  line-height: 36px;
  font-size: 18px;
}
.item-as-title span:first-child {
  margin-left: 20px;
}
.item-as-title span:last-child {
  float: right;
  margin-right: 15px;
  font-size: 10px;
  color: #ccc;
}
.item-as {
  width: 160px;
  margin: 18px auto;
}
.item-as-img {
  width: 160px;
  height: 160px;
  margin: 0px auto;
}
.item-as-price span {
  font-size: 18px;
}
.item-as-intro {
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled {
  margin-top: 5px;
  font-size: 12px;
}
.item-as-selled span {
  color: #005aa0;
}
/* ---------------侧边广告栏结束------------------- */

/* ---------------商品栏开始------------------- */
.goods-list-box {
  margin-left: 15px;
  width: calc(100% - 215px);
}
.goods-list-tool {
  width: 100%;
  height: 38px;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}
.goods-list-tool ul {
  padding-left: 15px;
  list-style: none;
}
.goods-list-tool li {
  cursor: pointer;
  float: left;
}
.goods-list-tool span {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-left: none;
  line-height: 36px;
  background-color: #fff;
}
.goods-list-tool span:hover {
  border: 1px solid #e4393c;
}
.goods-list-tool i:hover {
  color: #e4393c;
}
.goods-list-tool-active {
  color: #fff;
  border-left: 1px solid #ccc;
  background-color: #e4393c !important;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.goods-show-info {
  width: 240px;
  padding: 10px;
  margin: 15px 0px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-right: 20px;
}

.goods-show-img {
  width: 220px;
  height: 220px;
}

.goods-show-info:hover {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 15px #ccc;
}
.goods-show-price {
  margin-top: 6px;
}
.goods-show-detail {
  font-size: 12px;
  margin: 6px 0px;
}
.goods-show-num {
  font-size: 12px;
  margin-bottom: 6px;
  color: #009688;
}
.goods-show-num span {
  color: #005aa0;
  font-weight: bold;
}
.goods-show-seller {
  font-size: 12px;
  color: #e4393c;
}
.goods-page {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* ---------------商品栏结束------------------- */
</style>
